<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">账单详情</block>
		</cu-custom>
		<view class="tc pt50" style="padding-bottom: 50rpx;background-color: #ff5e1f;">
			<view class="fs26 fw600">
				<image :src="imgurl + '/img10.png'" class="img36 mr10"></image>
				<text class="fs28 text-white fw600" >零钱提现</text>
			</view>
			<view class="fs66 ff text-white" v-text="-Withdrawals.TiMoney">
				
				<text class="fs26">元</text>
			</view>
			<view class="fs26" style="margin-top: -10rpx; color: rgba(255,255,255,0.8);" v-text="bindWay(Withdrawals)"></view>
		</view>
		<!-- 时间轴 -->
		<view class="cu-timeline" v-if="Withdrawals.TiStatus==0">
			<view class="title fw600 ff margin-bottom">当前状态</view>
			<view class="cu-item first_item" :style="'background-image: url(' + imgurl + 'icon_check02.png);'">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">平台审核中</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.CreateTime"></view></view>
				</view>
			</view>
			<view class="cu-item" >
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">发起提现</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.CreateTime"></view></view>
				</view>
			</view>
		</view>
		<view class="cu-timeline"  v-if="Withdrawals.TiStatus==1">
			<view class="title fw600 ff margin-bottom">当前状态</view>
			<view class="cu-item first_item" :style="'background-image: url(' + imgurl + 'icon_check02.png);'">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs28 fw600">完成提现</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.MakeWorkTime"></view></view>
				</view>
			</view>
			<view class="cu-item first_item" >
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs28 fw600">已打款</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.MakeWorkTime"></view></view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">审核通过，正在发起打款</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.MakeWorkTime"></view></view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">平台审核中</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.CreateTime"></view></view>
				</view>
			</view>
			<view class="cu-item last_item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">发起提现</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.CreateTime"></view></view>
				</view>
			</view>
		</view>
		<view class="cu-timeline" v-if="Withdrawals.TiStatus==2">
		<view class="title fw600 ff margin-bottom">当前状态</view>
		<view class="cu-item first_item" :style="'background-image: url(' + imgurl + 'icon_check02.png);'">
			<view class="content">
				<view class="flex justify-between align-center"><view class="fs28 fw600">退款完成</view></view>
				<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.MakeWorkTime"></view></view>
			</view>
		</view>
		<view class="cu-item">
			<view class="content">
				<view class="flex justify-between align-center"><view class="fs24 text-gray">退款处理中</view></view>
				<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.MakeWorkTime"></view></view>
			</view>
		</view>
		<view class="cu-item">
			<view class="content">
				<view class="flex justify-between align-center"><view class="fs24 text-gray">审核不通过，正在发起退款</view></view>
				<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.MakeWorkTime"></view></view>
			</view>
		</view>
		<view class="cu-item">
			<view class="content">
				<view class="flex justify-between align-center"><view class="fs24 text-gray">平台审核中</view></view>
				<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.CreateTime"></view></view>
			</view>
		</view>
		<view class="cu-item last_item">
			<view class="content">
				<view class="flex justify-between align-center"><view class="fs24 text-gray">发起提现</view></view>
				<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.CreateTime"></view></view>
			</view>
		</view>
		</view>
		<view class="cu-timeline" v-if="Withdrawals.TiStatus==3">
		<view class="title fw600 ff margin-bottom">当前状态</view>
		<view class="cu-item first_item" :style="'background-image: url(' + imgurl + 'icon_check02.png);'">
			<view class="content">
				<view class="flex justify-between align-center"><view class="fs28 fw600">平台处理中</view></view>
				<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.MakeWorkTime"></view></view>
			</view>
		</view>
		<view class="cu-item first_item" >
			<view class="content">
				<view class="flex justify-between align-center"><view class="fs24 text-gray">打款异常,异常信息：<text  v-text="Withdrawals.Reason"></text></view></view>
				<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.MakeWorkTime"></view></view>
			</view>
		</view>
	
		<view class="cu-item">
			<view class="content">
				<view class="flex justify-between align-center"><view class="fs24 text-gray">审核通过，正在发起打款</view></view>
				<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.MakeWorkTime"></view></view>
			</view>
		</view>
		<view class="cu-item">
			<view class="content">
				<view class="flex justify-between align-center"><view class="fs24 text-gray">平台审核中</view></view>
				<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.CreateTime"></view></view>
			</view>
		</view>
		<view class="cu-item last_item">
			<view class="content">
				<view class="flex justify-between align-center"><view class="fs24 text-gray">发起提现</view></view>
				<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Withdrawals.CreateTime"></view></view>
			</view>
		</view>
		</view>
		
		<view class="qui-cells mt15">
			<view class="qui-cell">
				<view class="cell-hd fs24 text-gray">
					<view>提现金额</view>
					<view class="mt20">服务费用</view>
				</view>
				<view class="cell-bd tr fs24">
					<view>￥<text v-text="Withdrawals.TiMoney"></text></view>
					<view class="mt20">￥<text v-text="Withdrawals.KouMoney"></text></view>
				</view>
			</view>
			<view class="qui-cell">
				<view class="cell-hd fs24 text-gray">
					<view>提现单号</view>
					<view class="mt20" v-if="Withdrawals.PayWeiXinCode!=null">打款单号</view>
				</view>
				<view class="cell-bd tr fs24">
					<view v-text="Withdrawals.TiCode"></view>
					<view class="mt20" v-text="Withdrawals.PayWeiXinCode" v-if="Withdrawals.PayWeiXinCode!=null"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import base from 'utils/base.js';
export default {
	data() {
		return {
			imgurl: this.$imgurl,
			tip: '',
			Withdrawals:{}
		};
	},
	onLoad: function(option) {
		this.GetWithdrawalsByID(option.BusinessID);
		this.tip = unescape(option.tip);
	},
	methods: {
		bindWay:function(Withdrawals){
			let msg="提现到-";
			if(Withdrawals.TiMode==1) msg=msg+"支付宝"+"("+Withdrawals.TiNumber+")";
			else if(Withdrawals.TiMode==2) msg=msg+"微信"+"("+Withdrawals.TiNumber+")";
			else if(Withdrawals.TiMode==3) msg="微信红包";
				else if(Withdrawals.TiMode==6) msg="微信企业转账";
				return msg;
			
		},
		GetWithdrawalsByID: function(BusinessID) {
			let currentPage = this;

			let params = {
				type: 'GET',
				url: '/api/Withdrawals/GetWithdrawalsByID',
				data: {
					id: BusinessID
				},
				sCallback: function(response) {
					if (response.IsSuccess) {
						currentPage.Withdrawals = response.Data;
					} else {
						uni.showToast({
							title: response.Msg
						});
					}
				}
			};
			base.request(params);
		}
	}
};
</script>

<style lang="scss">
.img36 {
	width: 36rpx;
	height: 36rpx;
	position: relative;
	top: 6rpx;
}

.fs66 {
	font-size: 66rpx;
}
.cu-timeline > .cu-item::after {
	left: 16rpx;
	width: 0rpx;
	top: 30rpx;
	border-left: 2rpx dashed rgba(22, 82, 222, 0.2);
	background-color: transparent;
}
.cu-timeline {
	background-color: #fff;
	padding: 30rpx;
	.cu-item {
		padding-top: 0px;
	}
	.content {
		background-color: transparent !important;
		padding: 0 !important;
	}
}
.cu-timeline > .cu-item::before {
	left: 0rpx;
	font-size: 24rpx;
	width: 32rpx;
	height: 32rpx;
	line-height: 32rpx;
	top: 20rpx;
}
.cu-timeline > .cu-item {
	padding-left: 45rpx;
	padding-right: 0px;
}
.last_item {
	&:after {
		display: none !important;
	}
}
.first_item {
	background-repeat: no-repeat;
	z-index: 999;
	background-size: 30rpx 30rpx;
	&:before {
		display: none;
	}
}
</style>
